<template>
  <view class="home u-flex-col">
    <view class="u-flex u-row-between u-p-20 name-btn">
      <text class="f-bold u-font-lg t-deep-green u-m-l-20">{{ data.name }}</text>
      <u-tag
        v-if="data.work_type"
        class="u-m-r-30"
        bg-color="#D5EFE2"
        border-color="#D5EFE2"
        color="#5BAC84"
        :text="data.work_type"
        shape="circle"
      />
    </view>
    <view class="time-box u-p-r-20 u-p-l-40 u-p-t-40 u-p-b-40">
      <u-time-line>
        <u-time-line-item nodeTop="50" v-for="(item,index) in timeLine" :key="index">
          <template v-slot:node>
            <view class="time-line-node"></view>
          </template>
          <template v-slot:content>
            <u-card
              class="u-m-l-0 u-m-t-0"
              :border="false"
              box-shadow="0px 0px 8px #ddd6d6"
              :body-style="{ padding: '0 30rpx' }"
              :show-head="false"
            >
              <view slot="body">
                <view class="card-row u-flex-col u-p-t-20 u-p-b-30">
                  <view class="time-line-time u-p-t-20 u-p-b-20 t-section">
                    {{
                    item.time
                    }}
                  </view>
                  <navigator hover-class="none" class="time-line-title t-title">{{ item.name }}</navigator>
                </view>
              </view>
            </u-card>
          </template>
        </u-time-line-item>
      </u-time-line>
    </view>
  </view>
</template>

<script>
export default {
  name: 'personnelTrajectory',
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  mounted() {
    this.getData()
  },
  data() {
    return {
      search: {
        customerNo: ''
      },
      timeLine: []
    }
  },
  methods: {
    async getData() {
      this.search.customerNo = this.data.customer_no
      this.search.inWellTime = this.data.in_time
      this.search.peopleNo = this.data.people_no
      const res = await this.$post('/admin/ryHistoryCount/track/dataList', this.search)
      if (res && res.body) {
        res.body.forEach(item => {
          this.timeLine.push({
            time: item.inJzTime,
            name: item.stationName
          })
        })
      }
    }
  },
  onLoad() {}
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .name-btn {
    margin-top: 20rpx;
    width: 60%;
    height: 100rpx;
    border-top-right-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    box-shadow: 0px 0px 8px #ddd6d6;
  }
  .time-box {
    overflow: auto;
    .time-line-node {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      text-align: center;
      line-height: 35rpx;
      background: $self-color-light-green;
    }
    .time-line-title {
      padding-bottom: 10rpx;
      color: #333333;
    }
  }
}
</style>
